<!--
 * @description: 
 * @Date: 2022-10-19 13:08:41
 * @LastEditTime: 2022-11-09 19:34:59
-->
<template>
  <div class="Manager">
    <AppSide />
    <div class="manager-menu">
      <el-menu
        :default-active="r"
        class="el-menu-vertical-demo h-full"
        @open="handleOpen"
        @close="handleClose"
      >
        <el-menu-item index="/manager/index">
          <el-icon>
            <Odometer />
          </el-icon>
          <router-link to="/manager/index">数据统计</router-link>
        </el-menu-item>
        <el-sub-menu index="manager">
          <template #title>
            <el-icon>
              <User />
            </el-icon>
            <span>用户管理</span>
          </template>
          <router-link to="/manager/user">
            <el-menu-item index="/manager/user"> 用户列表 </el-menu-item>
          </router-link>
        </el-sub-menu>
        <el-sub-menu index="/manager">
          <template #title>
            <el-icon>
              <Box />
            </el-icon>
            <span>组件管理</span>
          </template>
          <router-link to="/manager/linkstore">
            <el-menu-item index="/manager/linkstore"> 标签商城 </el-menu-item>
          </router-link>
        </el-sub-menu>
        <el-sub-menu index="/manager/setting">
          <template #title>
            <el-icon>
              <setting />
            </el-icon>
            <span>系统设置</span>
          </template>
          <router-link to="/manager/setting">
            <el-menu-item index="/manager/setting">
              <el-icon>
                <setting />
              </el-icon>
              系统设置
            </el-menu-item>
          </router-link>
          <router-link to="/manager/CdnRefresh">
            <el-menu-item index="/manager/CdnRefresh">
              <el-icon>
                <Refresh />
              </el-icon>
              CDN刷新
            </el-menu-item>
          </router-link>
        </el-sub-menu>
      </el-menu>
    </div>
    <div class="manager-view">
      <router-view> </router-view>
    </div>
  </div>
</template>

<script setup>
import { Odometer, Box, User, Setting, Refresh } from "@element-plus/icons-vue";
import { defineAsyncComponent } from "vue";
import { useRoute } from "vue-router";
const AppSide = defineAsyncComponent(() => import("@/components/appSide.vue"));
const handleOpen = (key, keyPath) => {
  // console.log(key, keyPath)
};
const handleClose = (key, keyPath) => {
  // console.log(key, keyPath)
};
const route = useRoute();
const r = route.path;
</script>
<style lang="less">
.manager-menu {
  position: fixed;
  height: 100vh;
  width: 160px;
}

.manager-view {
  margin-left: 160px;
  width: calc(100% - 160px);
  min-height: 100vh;
  background-color: #f9fafb;
  padding: 15px;
}

.el-menu-item {
  min-width: 100% !important;
}
</style>
